<template>
  <div class="container">
    <custom-header title="巡检任务详情"></custom-header>
    <div class="content">
      <div class="top">
        <div class="item_list">
          <div class="item"
               v-for="(item,index) in topList"
               :key="index">
            {{ item.label }}： <span class="prop prop1"
                  v-if="item.label==='任务状态'">{{ topValue[item.prop] == 0 ? "" :  topValue[item.prop] == 1 ? '待执行' : topValue[item.prop] == 2? '执行中':topValue[item.prop] == 3?'暂停':topValue[item.prop] == 4?'中止':topValue[item.prop] == 5?'已完成':''}}</span>
            <span class="prop"
                  v-else>{{ topValue[item.prop] }}</span>
          </div>
        </div>
        <!-- <div class="action">
          <el-button type="primary"
                     icon="el-icon-edit"
                     @click="dialogVisible = true">修改</el-button>
          <el-button icon="el-icon-delete"
                     @click="del()">删除</el-button>
        </div> -->
      </div>
      <!-- <div class="abnormal_alarm">
        <div class="title">
          异常报警：
        </div>
        <div class="card_list">
          <div class="card"
               v-for="(item,index) in cardList"
               :key="index">
            <div class="title">
              {{ item.title }}
              <i class="el-icon-warning"></i>
            </div>
            <div class="alarm">
              <div class="alarm_item"
                   v-for="(v,i) in item.alarmList"
                   :key="i">
                <div class="desc">
                  <div class="red_dot"></div>
                  <span>{{ v.desc }}</span>
                </div>
                <div class="time">
                  {{ v.time }}
                </div>
              </div>
            </div>
          </div>

        </div>
      </div> -->
      <div class="map">
        <div class="card">
          <div class="title">
            场景地图：
          </div>
          <div class="map_content map_content2">

          </div>
        </div>
        <div class="card">
          <div class="title">
            任务地图：
          </div>
          <div class="map_content map_content1">

          </div>
        </div>
      </div>
    </div>
    <!-- <el-dialog title="编辑巡检任务"
               :visible.sync="dialogVisible"
               append-to-body
               custom-class="custom_dialog"
               width="60%">
      <div class="item_list">
        <div class="item"
             v-for="(item,index) in formList"
             :key="index">
          <span class="label">{{ item.label }}：</span>
          <el-upload v-if="item.type === 'upload'"
                     class="avatar-uploader"
                     action="https://jsonplaceholder.typicode.com/posts/"
                     :show-file-list="false">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-date-picker class="date_picker"
                          v-else-if="item.type === 'daterange'"
                          v-model="form[item.prop]"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
          <el-input v-else
                    v-model="form[item.prop]"
                    placeholder="场景名称"
                    :disabled="item.disabled"></el-input>
        </div>
      </div>
      <span slot="footer"
            class="dialog_footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogVisible = false">创 建</el-button>
      </span>
    </el-dialog> -->

    <!-- 编辑巡检任务 -->
    <el-dialog
      title="编辑巡检任务"
      :visible.sync="dialogVisible"
      append-to-body
      custom-class="custom_dialog"
      width="60%"
      :before-close="handleClose"
    >
    <el-row>
      <el-form label-width="140px"
               ref="editForm"
               :rules="rules"
               :model="editForm"
                >
        <el-col :span="12">
          <el-form-item label="场景名称"
                        prop="person_name">
            <el-input v-model="editForm.person_name"
                      placeholder="待同步"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="场景编号"
                        prop="person_name">
            <el-input v-model="editForm.person_name"
                      placeholder="待同步"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务名称"
                        prop="person_name">
            <el-input v-model="editForm.person_name"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务编号"
                        prop="person_name">
            <el-input v-model="editForm.person_name"
                      placeholder="待同步"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机器人名称"
                        prop="person_name">
            <el-input v-model="editForm.person_name"
                      placeholder="待同步"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机器人编号"
                        prop="person_name">
            <el-input v-model="editForm.person_name"
                      placeholder="待同步"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡检计划开始时间"
                        prop="entry_date">
            <el-date-picker style="width: 100%;"
                            v-model="editForm.entry_date"
                            type="datetime"
                            value-format='yyyy-MM-dd HH:mm:ss'
                            placeholder="请选择">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预计时长"
                        prop="entry_date">
            <el-date-picker style="width: 100%;"
                            v-model="editForm.entry_date"
                            type="datetime"
                            value-format='yyyy-MM-dd HH:mm:ss'
                            placeholder="请选择">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="温度预警值（℃）"
                        prop="person_name">
            <el-input v-model="editForm.person_name"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="湿度预警值（%）"
                        prop="person_name">
            <el-input v-model="editForm.person_name"
                      placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="patrolInspectionTaskSubmit"
          >确 定</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- <el-dialog title="删除任务"
               :visible.sync="deleteDialogVisible"
               append-to-body
               custom-class="custom_dialog"
               width="30%">
      <span>确认删除此任务？</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="deleteDialogVisible = false">确 定</el-button>
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import customHeader from "@/pages/Robot/components/CustomHeader.vue";
import customerTable from "@/pages/Robot/components/CustomerTable.vue";
import {patrolInspectionTaskApi} from '@/services/Robot'

export default {
  name: "PatrolInspectionTaskManagementDetails",
  components: {
    customHeader,
    customerTable
  },
  data () {
    return {
      topList: [
        {
          label: "任务名称",
          prop: "job_name"
        },
        {
          label: "场景名称",
          prop: "scenario_name"
        },
        {
          label: "机器人名称",
          prop: "dog_name"
        },
        {
          label: "任务编号",
          prop: "job_no"
        },
        {
          label: "场景编号",
          prop: "scenario_no"
        },
        {
          label: "机器人编号",
          prop: "dog_sn"
        },
        {
          label: "巡检计划开始时间",
          prop: "inspection_start_time"
        },
        {
          label: "预计时长",
          prop: "duration"
        },
        {
          label: "任务状态",
          prop: "job_status"
        },
        {
          label: "上次执行开始时间",
          prop: "last_exec_time"
        },
        {
          label: "本次执行开始时间",
          prop: "curr_exec_time"
        },
        {
          label: "本次执行完成时间",
          prop: "curr_end_time"
        },
        {
          label: "温度预警值",
          prop: "temp_alarm"
        },
        {
          label: "湿度预警值",
          prop: "humi_alarm"
        },
      ],
      topValue: {
        job_name: "任务1",
        scenario_no: "场景1",
        dog_name: "234测试机器狗",
        job_no: "任务001",
        scenario_no: "CJ001",
        dog_sn: "SN235",
        inspection_start_time: '2022/12/08 18:53:56',
        duration: '2小时5分钟6秒',
        job_status: '执行中',
        last_exec_time: '2022/12/08 18:53:56',
        curr_exec_time: '2022/12/08 18:53:56',
        curr_end_time: "2022/12/08 18:53:56",
        temp_alarm: '24℃',
        humi_alarm: '24%'
      },
      tableInfo: {
        column: [
          {
            prop: "index",
            type: "index",
            width: "50",
          },
          {
            label: "场景编码",
            prop: "number",
          },
          {
            label: "场景名称",
            prop: "name",
          },
          {
            label: "任务名称",
            prop: "job_name",
          },
          {
            label: "预计计划开始时间",
            prop: "curr_exec_time",
          },
          {
            label: "预计完成时间",
            prop: "curr_end_time",
          },
          {
            label: "实际时常",
            prop: "actualTime",
          },
          {
            label: "任务状态",
            prop: "job_status",
          },
        ],
        data: [
          {
            number: "CJ001",
            name: "场景1",
            job_name: "任务1",
            curr_exec_time: "2020-01-01 12:00:00",
            curr_end_time: "2020-01-01 12:00:00",
            actualTime: "2020-01-01 12:00:00",
            job_status: "已完成",
          },
          {
            number: "CJ001",
            name: "场景1",
            job_name: "任务1",
            curr_exec_time: "2020-01-01 12:00:00",
            curr_end_time: "2020-01-01 12:00:00",
            actualTime: "2020-01-01 12:00:00",
            job_status: "已完成",
          },
          {
            number: "CJ001",
            name: "场景1",
            job_name: "任务1",
            curr_exec_time: "2020-01-01 12:00:00",
            curr_end_time: "2020-01-01 12:00:00",
            actualTime: "2020-01-01 12:00:00",
            job_status: "已完成",
          },
          {
            number: "CJ001",
            name: "场景1",
            job_name: "任务1",
            curr_exec_time: "2020-01-01 12:00:00",
            curr_end_time: "2020-01-01 12:00:00",
            actualTime: "2020-01-01 12:00:00",
            job_status: "已完成",
          },
        ],
      },
      dialogVisible: false,
      formList: [
        {
          label: "场景名称",
          prop: "scenario_no",
          type: "input",
          placeholder: "场景1",
          disabled: true,
        },
        {
          label: "场景编号",
          prop: "sceneNumber",
          type: "input",
          placeholder: "CJ001",
          disabled: true,
        },
        {
          label: "任务名称",
          prop: "job_name",
          type: "input",
          placeholder: "请输入",
        },
        {
          label: "任务编号",
          prop: "taskNumber",
          type: "input",
          placeholder: "RW001",
          disabled: true,
        },
        {
          label: "机器人名称",
          prop: "dog_name",
          type: "input",
          placeholder: "机器人1",
          disabled: true,
        },
        {
          label: "机器人编号",
          prop: "robotNumber",
          type: "input",
          placeholder: "JQR1",
          disabled: true,
        },
        {
          label: "巡检计划开始时间",
          prop: "curr_exec_time",
          type: "daterange",
          placeholder: "待同步",
        },
        {
          label: "预计时长",
          prop: "duration",
          type: "input",
          placeholder: "2小时15分",
          disabled: true,
        },
        {
          label: "温度预警值（℃）",
          prop: "temp_alarm",
          type: "input",
          placeholder: "请输入",
        },
        {
          label: "湿度预警值（%）",
          prop: "humi_alarm",
          type: "input",
          placeholder: "请输入",
        },
        {
          label: "场景地图",
          prop: "map",
          type: "upload",
        },
      ],
      form: {},
      cardList: [
        {
          title: '环境报警',
          alarmList: [
            {
              desc: '温度过高',
              time: '2022/12/08 15:30:56',
            },
            {
              desc: '温度过高',
              time: '2022/12/08 15:30:56',
            },
            {
              desc: '温度过高',
              time: '2022/12/08 15:30:56',
            },
            {
              desc: '温度过高',
              time: '2022/12/08 15:30:56',
            },
          ]
        },
        {
          title: '机器人报警',
          alarmList: [
            {
              desc: '机器人电量过低，请及时处理',
              time: '2022/12/08 15:30:56',
            },
            {
              desc: '机器人电量过低，请及时处理',
              time: '2022/12/08 15:30:56',
            },
            {
              desc: '机器人电量过低，请及时处理',
              time: '2022/12/08 15:30:56',
            },
            {
              desc: '机器人电量过低，请及时处理',
              time: '2022/12/08 15:30:56',
            },
          ]
        }
      ],
      // deleteDialogVisible: false,
      editForm: {
        person_name: '',
        entry_date: '',
      },
      rules: {
        entry_date: [
          { required: true, message: "请选择巡检计划开始时间", trigger: "change" },
        ],
        person_name: [
          { required: true, message: "请输入场景名称", trigger: "blur" },
        ],
      }
    };
  },
  mounted() {
    this.handleJobDetail()
  },
  methods: {
    patrolInspectionTaskSubmit() {
      this.$refs.editForm.validate((valid, object) => {
        if(valid) {
          const params = {

          }
          ({data: {...params}}).then((res) => {
            if(res.code == 0) {
              this.dialogVisible = false
            }
          })
        }
      })
    },
    handleJobDetail() {
      console.log(window.location.search.split('=')[1], 'search');
      const params = {
        job_id: window.location.search.split('=')[1],
      }
      patrolInspectionTaskApi.jobDetail({
        params: {
          ...params,
        }
      }).then((res) => {
        if(res.code == 0) {
          this.topValue = res.data
        }
      }).catch((e) => {

      })
    },
    del () {
      this.$confirm('确认删除此任务？', '删除任务', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .content {
    padding: 24px;

    .top {
      padding: 8px 0 31px;
      border-bottom: 1px solid #e6e6e6;

      .item_list {
        display: flex;
        flex-wrap: wrap;

        .item {
          width: 30%;
          margin-bottom: 20px;
          color: rgba(0, 0, 0, 0.4470588235294118);

          .prop {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: bold;
          }
          .prop1 {
            color: #00b836;
          }
        }
      }

      .action {
        .el-button--default {
          color: #1890ff;
          border-color: #1890ff;
        }
      }
    }

    .abnormal_alarm {
      .card_list {
        display: flex;
        justify-content: space-between;
        gap: 15px;

        .card {
          width: 50%;
          height: 263px;
          background: linear-gradient(
            180deg,
            rgba(255, 86, 0, 0.05) 0%,
            rgba(255, 86, 0, 0) 100%
          );
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
          padding: 20px 30px;

          .title {
            font-weight: bold;
            font-size: 18px;
            color: rgba(0, 0, 0, 0.85);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0 18px;
          }

          .alarm {
            display: flex;
            flex-direction: column;
            gap: 14px;

            .alarm_item {
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
              padding-bottom: 10px;

              .desc {
                display: flex;
                align-items: center;

                .red_dot {
                  width: 5px;
                  height: 5px;
                  background: #ff0006;
                  border-radius: 50%;
                  margin-right: 10px;
                }

                span {
                  color: rgba(0, 0, 0, 0.65);
                }
              }

              .time {
                color: rgba(0, 0, 0, 0.65);
              }
            }
          }
        }
      }
    }

    .map {
      display: flex;
      justify-content: space-between;
      gap: 15px;

      .card {
        width: 50%;

        .map_content {
          height: 261px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .map_content1 {
          background-image: url("../../../assets/robot/map1.png");
        }
        .map_content2 {
          background-image: url("../../../assets/robot/map2.png");
        }
      }
    }

    .title {
      padding: 18px 0 23px;
      font-size: 13px;
      color: #595959;
    }
  }

  .el-button--primary {
    background-color: #1890ff;
    border-color: #1890ff;
    color: #fff;
  }
}
</style>
<style lang="scss">
.custom_dialog {
  .el-dialog__header {
    padding: 18px;
    text-align: center;
    background-color: #1890ff;

    .el-dialog__close,
    .el-dialog__title {
      color: white;
      font-weight: bold;
      font-size: 18px;
    }
  }

  .item_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;

    .item {
      width: 48%;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding: 0 20px;

      .label {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        width: 140px;
        text-align: end;
      }

      .el-input,
      .el-date-editor {
        flex: 1;
      }

      .el-range-separator {
        width: 20px;
      }
    }

    .avatar-uploader {
      flex: 1;

      .el-upload:hover {
        border-color: #409eff;
      }

      .el-upload {
        width: 100%;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100%;
        height: 102px;
        line-height: 102px;
        text-align: center;
      }
    }
  }

  .dialog_filter {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
      display: flex;
      align-items: center;
      width: 33%;

      .label {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        width: 100px;
        text-align: end;
      }

      .el-input {
        flex: 1;
      }

      .el-button {
        margin-right: 50px;
      }
    }
  }

  .table {
    padding-top: 30px;
  }

  .el-dialog__footer {
    text-align: center;
    padding: 20px 0;

    .el-button--primary {
      margin-left: 50px;
    }
  }
}
</style>
